import React, { Component } from 'react'
import axios from 'axios'


export default class App extends Component {
    state = {
        type: 1
    }
    render() {
        return (
            <div>
                <ul>
                    <li onClick={() => {
                        this.setState({ type: 1 })
                    }}>正在热映</li>
                    <li onClick={() => {
                        this.setState({ type: 2 })
                    }}>即将上映</li>
                </ul>
                <Child type={this.state.type} />
            </div>
        )
    }
}

class Child extends Component {
    state = {
        list: [],
        type: 1
    }
    static getDerivedStateFromProps(nextProps, nextState) {
        console.log("...getDerivedStateFromProps")
        return {
            type: nextProps.type
        }
    }
    componentDidUpdate(prevProps, prevState) {
        if(prevState.type === this.state.type) {
            return;
        }
        if (this.state.type === 1) {
            console.log("componentDidUpdate----正在热映")
            axios({
                url: "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=6369301",
                headers: {
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16395416565231270166529","bc":"110100"}',
                    'X-Host': 'mall.film-ticket.film.list'
                }
            }).then(res => {
                this.setState({
                    list: res.data.data.films
                })
            })
        } else {
            console.log("componentDidUpdate----即将上映")
            axios({
                url: "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=2&k=8077848",
                headers: {
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16395416565231270166529","bc":"110100"}',
                    'X-Host': 'mall.film-ticket.film.list'
                }
            }).then(res => {
                this.setState({
                    list: res.data.data.films
                })
            })
        }
    }
    render() {
        return (
            <ul>
                {
                    this.state.list.map(item =>
                        <li key={item.filmId}>{item.name}</li>
                    )
                }
            </ul>
        )
    }
}
